<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="parent_one">
    <div id="one">
        <p>祝愿墙</p>
        <a href="http://localhost:63342/%E5%B9%B3%E5%B8%B8%E7%9A%84%E4%B8%80%E4%BA%9Bdemo/hopeWallImg.html">
            <img src="images/hopeWallImg.png" alt="">
        </a>
    </div>

    <div id="two">
        <p>搜索框</p>
        <a href="http://localhost:63342/%E5%B9%B3%E5%B8%B8%E7%9A%84%E4%B8%80%E4%BA%9Bdemo/searchText.html">
            <img src="images/searchText.png" alt="">
        </a>
    </div>

    <div id="three">
        <p>添加和删除</p>
        <a href="http://localhost:63342/%E5%B9%B3%E5%B8%B8%E7%9A%84%E4%B8%80%E4%BA%9Bdemo/addAndRemove.html">
            <img src="images/addAndRemove.png" alt="">
        </a>
    </div>
</div>

<div class="parent_two">
    <div id="four">
        <p>显示时间</p>
        <a href="http://localhost:63342/%E5%B9%B3%E5%B8%B8%E7%9A%84%E4%B8%80%E4%BA%9Bdemo/showTime.html">
            <img src="images/showTime.png" alt="">
        </a>
    </div>
    <div id="five">
        <p>放大镜</p>
        <a href="http://localhost:63342/%E5%B9%B3%E5%B8%B8%E7%9A%84%E4%B8%80%E4%BA%9Bdemo/magnifier.html">
            <img src="images/magnifier.png" alt="">
        </a>
    </div>
    <div id="six">
        <p>滚动条</p>
        <a href="http://localhost:63342/%E5%B9%B3%E5%B8%B8%E7%9A%84%E4%B8%80%E4%BA%9Bdemo/scrollBar.html">
            <img src="images/scrollBar.png" alt="">
        </a>
    </div>
</div>
<div class="parent_three">
    <div id="seven">
        <p>固定导航栏</p>
        <a href="http://localhost:63342/%E5%B9%B3%E5%B8%B8%E7%9A%84%E4%B8%80%E4%BA%9Bdemo/fixNav.html">
            <img src="images/fixNav.png" alt="">
        </a>
    </div>
    <div id="eight">
        <p>金斗云</p>
        <a href="http://localhost:63342/%E5%B9%B3%E5%B8%B8%E7%9A%84%E4%B8%80%E4%BA%9Bdemo/jindouyun.html">
            <img src="images/jindouyun.png" alt="">
        </a>
    </div>
    <div id="nine">
        <p>手风琴</p>
        <a href="http://localhost:63342/%E5%B9%B3%E5%B8%B8%E7%9A%84%E4%B8%80%E4%BA%9Bdemo/shoufengqin.html">
            <img src="images/shoufenqin.png" alt="">
        </a>
    </div>
</div>
<div class="parent_four">
    <div id="ten">
        <p>开机动画</p>
        <a href="http://localhost:63342/%E5%B9%B3%E5%B8%B8%E7%9A%84%E4%B8%80%E4%BA%9Bdemo/kaijidonghua.html">
            <img src="images/kaijidonghua.png" alt="">
        </a>
    </div>
    <div id="eleven">
        <p>旋转木马</p>
        <a href="http://localhost:63342/%E5%B9%B3%E5%B8%B8%E7%9A%84%E4%B8%80%E4%BA%9Bdemo/xuanzhuanmuma.html">
            <img src="images/xuanzhuanmuma.png" alt="">
        </a>
    </div>
    <div id="twelve">
        <p>密码强度</p>
        <a href="http://localhost:63342/%E5%B9%B3%E5%B8%B8%E7%9A%84%E4%B8%80%E4%BA%9Bdemo/passwordStrong.html">
            <img src="images/mimaqiangdu.png" alt="">
        </a>
    </div>
</div>
<div class="parent_five">
    <div id="thirteen">
        <p>全选反选</p>
        <a href="http://localhost:63342/%E5%B9%B3%E5%B8%B8%E7%9A%84%E4%B8%80%E4%BA%9Bdemo/quanxuanfanxuan.html">
            <img src="images/quanxuanfanxuan.png" alt="">
        </a>
    </div>
    <div id="fourteen">
        <p>动态输入</p>
        <a href="http://localhost:63342/%E5%B9%B3%E5%B8%B8%E7%9A%84%E4%B8%80%E4%BA%9Bdemo/dongtaishuru.html">
            <img src="images/dongtaishuru.png" alt="">
        </a>
    </div>
    <div id="fifteen">
        <p>jQ中的添加和删除数据</p>
        <a href="http://localhost:63342/%E5%B9%B3%E5%B8%B8%E7%9A%84%E4%B8%80%E4%BA%9Bdemo/dongtaishuru.html">
            <img src="images/dongtaishuru.png" alt="">
        </a>
    </div>
</div>
<div class="parent_six">
    <div id="sixteen">
        <p>按键改变颜色</p>
        <a href="http://localhost:63342/%E5%B9%B3%E5%B8%B8%E7%9A%84%E4%B8%80%E4%BA%9Bdemo/anjiangaibianyanse.html">
            <img src="images/anjiangaibianyanse.png" alt="">
        </a>
    </div>
    <div id="seventeen">
        <p>五角星评分案例</p>
        <a href="http://localhost:63342/%E5%B9%B3%E5%B8%B8%E7%9A%84%E4%B8%80%E4%BA%9Bdemo/wujiaoxing.html">
            <img src="images/wujiaoxing.png" alt="">
        </a>
    </div>
    <div id="eighteen">
        <p>jQUI-新闻</p>
        <a href="http://localhost:63342/%E5%B9%B3%E5%B8%B8%E7%9A%84%E4%B8%80%E4%BA%9Bdemo/jQUI-news.html">
            <img src="images/jQUI-news.png" alt="">
        </a>
    </div>
</div>
</body>
</html>